﻿@page "/DateRangePicker/Date-Range"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>In the Blazor [Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) example, the date ranges from <code>Jan 15, 2017 - Dec 20, 2017</code> have been set. All the other dates are out of range and restricted to set or select.</p>
</SampleDescription>
<ActionDescription>
    <p>DateRangePicker has <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_Min' target='_blank'> Min</a> and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_Max' target='_blank'> Max</a> supports to restrict the user to select a value from the given range. Only the values in this range will be enabled.
       In this sample, we have specified <code>Min</code> range as <code>Jan 15, 2017</code> and <code>Max</code> range as <code>Dec 20, 2017</code>. User will be able to select the values between this range only.
    </p>
    <p>More information on the DateRangePicker min/max support can be found in the<a href='https://blazor.syncfusion.com/documentation/daterangepicker/range-restriction/#restrict-the-range-within-a-range' target='_blank'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper">
        <SfDateRangePicker TValue="DateTime?" Placeholder="Choose a Range" Min="@MinDate" Max="@MaxDate"></SfDateRangePicker>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>

@code {
    public DateTime MinDate { get; set; } = new DateTime(2017, 01, 05);
    public DateTime MaxDate { get; set; } = new DateTime(2017, 12, 20);
}
